import { defineComponent } from 'vue';
import { NButtonGroup } from 'naive-ui';
import Imports from './components/Imports';
import Exports from './components/Exports';
import Previews from './components/Previews';
import Aligns from './components/Aligns';
import Scales from './components/Scales';
import Commands from './components/Commands';
import ExternalTools from './components/ExternalTools';
import SaveFlow from './components/Save';

const Toolbar = defineComponent({
  name: 'ToolBar',
  emits: ['saveFlow', 'saveJson'],
  setup(props, { emit }) {
    const handleFlowSave = (xml: string) => {
      emit('saveFlow', xml);
    };

    const handleJsonSave = (json: string) => {
      emit('saveJson', json);
    };

    return () => (
      <div class="toolbar">
        <NButtonGroup>
          <SaveFlow onSaveFlow={handleFlowSave} onSaveJson={handleJsonSave}></SaveFlow>
          <Imports></Imports>
          <Exports></Exports>
          <Previews></Previews>
        </NButtonGroup>
        <Aligns></Aligns>
        <Scales></Scales>
        <Commands></Commands>
        <ExternalTools></ExternalTools>
      </div>
    );
  }
});

export default Toolbar;
